<template>
  <div class="theme_box" style="height: 300px;padding: 13px;">
    <div style="width: 100%; height: 200px">
      <n-carousel autoplay>
        <img v-for="src in goods.cover || ['images/default.jpg']" :src="src"
          style="width: 100%; height: 100%; object-fit: cover" />
      </n-carousel>
    </div>
    <div style="padding: 10px 0">
      <n-space justify="space-between">
        <span style="font-size: 22px; font-weight: 800; color: red ">
          ￥{{ goods.sellPrice }}
          <span style="color: gray; font-size: 13px; text-decoration: line-through">{{ goods.originPrice }}</span>
        </span>
        <n-dropdown trigger="click" :options="options" @select="handleSelect">
          <n-button secondary size="small">
            <template #icon>
              <a-icon name="OverflowMenuHorizontal"></a-icon>
            </template>
          </n-button>
        </n-dropdown>
      </n-space>
      <n-space justify="space-between">
        <span style="font-size: 15px; font-weight: 400">{{ goods.goodsName }}</span>
        <span>月销量：{{ goods.monthSales }}</span>
      </n-space>
      <n-space style="margin-top:10px">
        <n-tag type="success" v-if="goods.status == 1" size="small">{{ Status[goods.status] }}</n-tag>
        <n-tag type="error" v-else size="small">{{ Status[goods.status] }}</n-tag>
        <n-tag type="info" v-if="goods.advice" size="small">推荐</n-tag>
      </n-space>
    </div>
  </div>
</template>
<script lang="tsx" setup>
type Goods = {
  carbs: '52.1';
  cateName: '';
  childIds: '';
  cover: '';
  createTime: '2022-08-27 22:18:15';
  dietaryFiber: '3.5';
  disCount: 0.4;
  fat: '12.5';
  foodTypes: '7';
  goodsDesc: '测试';
  goodsName: '黄焖鸡米饭';
  goodsOption: '1';
  id: 15;
  isCombo: 2;
  kcal: '300';
  likeCount: 99;
  limitNum: 2;
  monthSales: 3000;
  originPrice: 50;
  praiseRate: 0;
  protein: '27.8';
  salt: '1.7';
  sellPrice: 20;
  status: 1;
  storeName: '';
  totalSales: 9999;
  updateTime: '2022-08-27 22:18:15';
  advice: 0;
};
let props = defineProps<{
  goods: Goods;
}>();

enum Status {
  '已上架' = 1,
  '未上架' = 2
}

let options = [
  {
    label: '编辑',
    key: 'edit'
  },
  {
    label: '规格',
    key: 'editOpt'
  },
  {
    label: '删除',
    key: 'remove'
  },
  {
    label: '上/下架',
    key: 'status'
  },
  {
    label: '设为/取消推荐',
    key: 'recommend'
  }
];

let emits = defineEmits(['edit', 'remove', 'editOpt']);

const handleSelect = k => {
  emits(k, props.goods);
};
</script>
